<template>
  <div class="course-table-container">
    <div class="page-header mb-4">
      <h2 class="text-xl font-bold text-gray-800">我的课程表</h2>
      <div class="filter-section">
        <!-- <el-select
          v-model="selectedYear"
          placeholder="选择学年"
          class="mr-4"
        >
          <el-option
            v-for="year in courseYears"
            :key="year"
            :label="year"
            :value="year"
          />
        </el-select> -->

        <!-- <el-select
          v-model="selectedSemester"
          placeholder="选择学期"
          class="mr-4"
        >
          <el-option label="第一学期" value="1" />
          <el-option label="第二学期" value="2" />
        </el-select>

        <el-button type="primary" @click="fetchCourseSchedule">
          查看课程表
        </el-button> -->
      </div>
    </div>

    <div class="course-grid">
      <div class="course-day" v-for="day in weekDays" :key="day">
        <div class="day-header">{{ day }}</div>
        <div class="course-block" v-for="course in getCoursesByDay(day)" :key="course.id">
          <div class="course-info">
            <div class="course-name">{{ course.courseName }}</div>
            <div class="teacher-info">{{ course.teacherName }}</div>
            <div class="time-location">
              {{ course.timePeriod }} | {{ course.classroom }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getStudentCourses } from '@/api/student';
import { useUserStore } from '@/store/user';

const userStore = useUserStore();

// 学年选择（最近5年）
// const currentYear = new Date().getFullYear();
// const courseYears = ref([currentYear, currentYear - 1, currentYear - 2]);
// const selectedYear = ref(currentYear.toString());
// const selectedSemester = ref('1');

// 课程表数据
const courseData = ref([]);
const weekDays = ['周一', '周二', '周三', '周四', '周五'];
const loading = ref(false);
const error = ref(null);

// 获取课程表
const fetchCourseSchedule = async () => {
  loading.value = true;
  error.value = null;
  const studentId = userStore.userInfo.studentId;
  
  try {
    // const response = await getStudentCourses({
    //   // classYear: parseInt(selectedYear.value),
    //   // semester: parseInt(selectedSemester.value),
    //   // studentId: userStore.userInfo.studentId
  
    // });

      const response = await getStudentCourses(studentId);
    
    // 处理数据库返回的数据格式
    if (response.data && Array.isArray(response.data)) {
      // 假设返回的是数组格式，每条记录包含多个字段
      courseData.value = response.data.map(record => {
        // 根据你提供的示例数据，映射各字段
        return {
          id: record.id || record[0], // 课程ID
          courseName: record.courseName || record[1], // 课程名称
          teacherName: record.teacherName || record[2], // 教师
          className: record.className || record[3], // 班级
          semester: record.semester || record[4], // 学期
          dayOfWeek: record.dayOfWeek || record[5], // 星期
          timePeriod: record.timePeriod || record[6], // 时间段
          classroom: record.classroom || record[7], // 教室
          createTime: record.createTime || record[8], // 创建时间
          updateTime: record.updateTime || record[9] // 更新时间
        };
      });
    } else {
      error.value = '获取的课程数据格式不正确';
    }
  } catch (error) {
    console.error('获取课程表失败:', error);
    error.value = '获取课程表失败，请重试';
  } finally {
    loading.value = false;
  }
};

// 按星期过滤课程
const getCoursesByDay = (day) => {
  return courseData.value.filter(course => course.dayOfWeek === day);
};

onMounted(() => {
  fetchCourseSchedule();
});
</script>

<style scoped>
.course-table-container {
  padding: 20px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.page-header {
  margin-bottom: 24px;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 16px;
}

.filter-section {
  display: flex;
  align-items: center;
  gap: 16px;
}

.course-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.course-day {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.day-header {
  font-weight: 500;
  color: #606266;
  text-align: center;
}

.course-block {
  padding: 12px;
  border-radius: 6px;
  background: #f5f7fa;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.course-name {
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 4px;
}

.teacher-info {
  font-size: 0.9rem;
  color: #606266;
  margin-bottom: 4px;
}

.time-location {
  font-size: 0.875rem;
  color: #909399;
}
</style>